<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>红米5 plus</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css"/>
    <script src="../js/jquery.1.11.1.min.js"></script>
</head>
<body>

<!-- 顶部菜单模块 -->
<th:block th:include="header"/>

<div class="plus5_no1">
    <h2 class="plus5_no1_float" th:text="${product.name}"></h2>
    <p class="plus5_no1_float">|</p><a href="javascript:;" class="plus5_no1_float" >红米5</a>
    <a href="javascript:;" class="plus5_no1_float_rigth">用户评价概述</a>
    <span class="plus5_no1_float_rigth">|</span>
    <a href="javascript:;" class="plus5_no1_float_rigth">F码通道</a>
    <span class="plus5_no1_float_rigth">|</span>
    <a href="javascript:;" class="plus5_no1_float_rigth">概述</a>
</div>
<!--未登录提示框-->
<div class="plus5_no2 ">
    <div class="plus5_no2_in">
        <a class="plus5_no2_in_a"> 为方便您购买，请提前登录 </a>
        <a class="plus5_no2_in_a orange" style="color: pink;" href="/login">立即登录</a>
        <a id="plus5_no2_in" class="plus5_no2_in_a" href="javascript:;">x</a>
    </div>
</div>

<!--商品详情-->
<div class="plus5_no3">
<!--    商品轮播图-->
    <div class="plus5_no3_img">
        <img src="../img/plus5_01.jpg" style="display: block" alt="">
        <img src="../img/plus5_02.jpg" style="display: none" alt="">
        <img src="../img/plus5_03.jpg" style="display: none" alt="">
        <img src="../img/plus5_04.jpg" style="display: none" alt="">
    </div>

<!--     商品信息 -->
    <div class="plus5_no3_right">
<!--        基本信息-->
        <h1 th:text="${product.name}"></h1>
        <p class="plus5_no3_right_p2" >
            <span class="plus5_no3_right_span2">「64GB立减200元」</span>
            <span th:text="${product.title}"></span>
        </p>
        <p>
            <span>小米自营</span>
        </p>
        <p class="plus5_no3_right_p3">
            <span th:text="${product.price}"></span>
        </p>
<!--        收货地址 -->
        <div class="plus5_no3_right_div5">
            <p>北京 北京市 东城区 永定门外街道
                <span class="plus5_no3_right_div5_span">
                <a class="plus5_no3_right_div5_span" href="">修改</a><br>有现货
                </span>
            </p>
        </div>
<!--        版本型号-->
        <div class="plus5_no3_right_div6">选择版本</div>
        <div class="plus5_no3_right_div7">
            <li class="plus5_no3_right_div7_in plus5_no3_right_div7_in_hover">
                <span class="plus5_no3_right_div7_span0 " th:text="${product.model}">3GB+32GB</span>
                <span class="plus5_no3_right_div7_span " th:text="${product.price}">999元</span>
            </li>
            <li class="plus5_no3_right_div7_in plus5_no3_float">
                <span class="plus5_no3_right_div7_span0 ">4GB+64GB</span>
                <span class="plus5_no3_right_div7_span ">1299元</span>
            </li>
        </div>
<!--        颜色-->
        <div class="plus5_no3_right_div6">选择颜色</div>
        <div class="plus5_no3_right_div9">
            <li class="plus5_no3_right_div7_in plus5_no3_right_div7_in_hover ">
                <img src="../img/plus5_phone_01.png" alt="">
                <span th:text="${product.color}">金色</span>
            </li>
            <li class="plus5_no3_right_div7_in plus5_no3_float">
                <img src="../img/plus5_phone_02.png" alt="">
                <span>黑色</span>
            </li>
            <li class="plus5_no3_right_div7_in">
                <img src="../img/plus5_phone_03.png" alt="">
                <span>玫瑰金</span>
            </li>
            <li class="plus5_no3_right_div7_in plus5_no3_float">
                <img src="../img/plus5_phone_04.png" alt="">
                <span>浅蓝色</span>
            </li>
        </div>
<!--        结算总价格-->
        <div class="plus5_no3_right_div10">
            <p class="plus5_no3_right_div10_p1" th:text="${product.name}">红米5 Plus</p>
            <span class="plus5_no3_right_div10_span0" th:text="${product.model}">4GB+64GB</span>
            <span class="plus5_no3_right_div10_span2" th:text="${product.color}">金色</span>
            <span class="plus5_no3_right_span10" th:text="${product.price}">999元</span>
            <p class="plus5_no3_right_div10_p2" th:text="${product.price}">总计 ：999元</p>
        </div>
<!--        加入购物车-->
        <a href="javascript:;">
            <div class="plus5_no3_right_div11" id="addCart" th:pid="${product.id}">加入购物车</div>
        </a>
        <div class="plus5_no3_right_div12">
            <div class="plus5_no3_right_div12_y">√</div>
            <div class="plus5_no3_right_div12_z">七天无理由退货</div>
            <div class="plus5_no3_right_div12_y">√</div>
            <div class="plus5_no3_right_div12_z">15天质量问题换货</div>
            <div class="plus5_no3_right_div12_y">√</div>
            <div class="plus5_no3_right_div12_z">360天保障</div>
        </div>
        <a href="javascript:void (0);"></a>
    </div>
</div>

<!-- 底部菜单模块-->
<th:block th:include="foot"/>

<!-- 侧边功能模块 -->
<div class="fixed">
    <div class="fixed_in">
        <a class="fixed_a" href=""><img src="../img/fixed_01.png" alt="" class="fixed_img"></a>
        <p class="fixed_p">个人中心</p>
    </div>
    <div class="fixed_in">
        <a class="fixed_a" href=""><img src="../img/fixed_02.png" alt="" class="fixed_img"></a>
        <!--<a class="fixed_a" href=""><img src="img/fixed_o_02.png" alt="" class="fixed_img"></a>-->
        <p class="fixed_p">联系客服</p>
    </div>
    <div class="fixed_in">
        <a class="fixed_a" href=""><img src="/img/fixed_03.png" alt="" class="fixed_img"></a>
        <p class="fixed_p">购物车</p>
    </div>
    <div class="fixed_in fi_bottmo">
        <a class="fixed_a" href=""><img src="/img/fixed_04.png" alt="" class="fixed_img"></a>
        <p class="fixed_p">回到顶部</p>
    </div>
</div>


<!-- 引入依赖的js文件 -->
<script src="/layui/layui.js"></script>
<script src="/js/common.js"></script>
<script>

    layui.use(["layer"],function (){
       var layer = layui.layer;
       var $ = layui.jquery;

       //给加入购物车绑事件
       $("#addCart").on("click",function (){
           $.post("/cart/save",{pId:$(this).attr("pid")},function (result){
               layer.msg(result.msg);
           });
       });



    });

//     var plus5_no2_in = document.getElementById("plus5_no2_in");
//     var plus5_no2 = document.getElementsByClassName("plus5_no2")[0];
//     plus5_no2.onclick = function () {
//         plus5_no2.className = "plus5_no2 plus5_no2_close";
// //            plus5_no2.style.display="none";
//     }
//     $(".plus5_no3_right_div9 .plus5_no3_right_div7_in").click(function () {
//         console.log($(this).children().eq(1).html());
//         $(".plus5_no3_right_div10_span2").html($(this).children().eq(1).html());
//
//         $(".plus5_no3_img img").css("display", "none").eq($(this).index()).css("display", "block");
//         $(this).siblings().removeClass("plus5_no3_right_div7_in_hover").end().addClass("plus5_no3_right_div7_in_hover");
//
//     })
//     $(".plus5_no3_right_div7 .plus5_no3_right_div7_in").click(function () {
// //            var value = $(".plus5_no3_right_div7_span0 ").html();
//         console.log($(this).children().eq(1).html());
//         $(".plus5_no3_right_div10_span0").html($(this).children().html());
//         $(".plus5_no3_right_span10").html($(this).children().eq(1).html());
//         var value = "总计:" + $(this).children().eq(1).html()
//         $(".plus5_no3_right_div10_p2").html(value);
//
//         $(this).siblings().removeClass("plus5_no3_right_div7_in_hover").end().addClass("plus5_no3_right_div7_in_hover");
//     })
</script>

</body>
</html>